import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Loading,
    Birthday
} from './../../../components';

import moment from 'moment';

import Footer from './components/footer';

import Container from './components/container';

import Options from '../../../const/options';
import Select from '../../home/filter/select';

import Connect from '../../../utils/connect';

import userAction from '../../../state/actions/user';
import * as userTypes from '../../../state/types/user';

interface Props {
    page:number,
    userActions:any,
    onPageChange:Function
}

interface State {
    birthday:any,
    gender:number
}

@Connect({
    userActions:userAction
})
class General extends PureComponent<Props,State> {
    state = {
        gender:0,
        birthday:``
    }

    static defaultProps = {
        page:0,
        userActions:{},
        onPageChange:() => null
    }

    get disabled() {
        const {
            gender,
            birthday
        } = this.state;
        return !gender || !birthday;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    private onItemChange = (filed:string) => (
        (value:string) => {
            const _state:any = {
                [filed]:value
            }
            this.setState(_state)
        }
    )

    private toPrePage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page - 1);
    }

    private toNextPage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page + 1);
    }

    private onSubmit = async () => {
        const {
            gender,
            birthday
        } = this.state;

        const para = {
            gender:gender,
            birthday:moment(birthday).format(
                `YYYY-MM-DD`
            )
        }

        Loading.show();
        try {
            await this.userActions[
                userTypes.setUserProfile
            ](para);
            this.toNextPage();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    render() {
        const {
            gender,
            birthday
        } = this.state;
        return (
            <Fragment>
                <Container>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            What is your birthday?
                        </Text>
                        <Birthday
                            value={birthday}
                            placeholder="Your birthday"
                            onChange={this.onItemChange(`birthday`)}
                        />
                    </View>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            What is your gender?
                        </Text>
                        <Select
                            value={gender}
                            options={Options.gender}
                            onChange={this.onItemChange(`gender`)}
                        />
                    </View>
                </Container>
                <Footer
                    disabled={this.disabled}
                    nextPress={this.onSubmit}
                    prePress={this.toPrePage}
                />
            </Fragment>
        )
    }
}

export default General;

const styles = StyleSheet.create({
    itemRow:{
        marginBottom:40
    },
    title:{
        fontSize:20,
        color:`#000`,
        fontWeight:`bold`
    }
}) as any;